<script setup lang="ts">
import { usePersonalData } from '@/common/stores/modules/personal-data';
import { useUserStore } from '@/common/stores/modules/users-store';

const personal = usePersonalData().personalData
const userStore = useUserStore()

const props = defineProps({
  dataToPass: {
    type: String,
    request: true,
  },
})
</script>

<template>
  <!-- 当前用户 -->
  <div style=" display: flex; justify-content: flex-end;width: 100%">
    <a-comment class="chat-content-oneself">
      <!-- 用户姓名 -->
      <template #author style="display: flex; justify-content: flex-end">
        <h3>
          {{ personal.nickname ? personal.nickname : userStore.userInfo?.user }}
        </h3>
      </template>
      <!-- 用户头像 -->
      <template #avatar style="display: flex; flex-direction: row-reverse">
        <a-avatar class="chat-content-oneself-img" src="src/assets/lijie.jpg" alt="Han Solo" />
      </template>
      <!-- 用户输入内容 -->
      <template #content>
        <p class="chat-content-oneself-p">
          {{ props.dataToPass }}
        </p>
      </template>
    </a-comment>
  </div>
</template>

<style lang="scss" scoped>
// 当前用户
.chat-content-oneself {
  display: flex;
  flex-direction: row-reverse;

  /* 新增，让内部元素从右往左排列 */
  align-items: center;
  width: 40%;
  padding: 0 20px;

  &-img {
    width: 30px;
    height: 30px;
  }

  &-p {
    display: inline-block;
    width: auto;

    /* 或者width: fit - content; */
    padding: 10px;
    background-color: #95ec69;
    border-radius: 5px;
  }
}

// 头像
:deep .ant-comment .ant-comment-inner {
  display: flex;
  flex-direction: row-reverse;
}

// 姓名
:deep .ant-comment .ant-comment-content-author {
  display: flex;
  justify-content: flex-end;
}

:deep .ant-comment .ant-comment-content {
  text-align: end;
}
</style>
